import React, {Component} from 'react';
import {Card,Button} from 'antd-mobile';
import Nav from '../assets/images/nav-1.png'
import {Link} from "react-router-dom";

import './MovieList.scss'


class MovieList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            MovieList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15",]
        }

    }

    renderMovieList() {
        return this.state.MovieList.map(item => (
            <Card key={item} full={true}>
                <div className={"movie-hotlist-item"}>
                    <Link className="left" to={"/movie"} >
                        <img src={Nav} alt="" width={"80"} height={"90"}/>
                    </Link>
                    <div className="middle">
                        <div className={"test1"}>怒火•重案</div>
                        <div className={"test2"}>猫眼评分 <span>9.5</span></div>
                        <div className={"test3"}>主演甄子丹谢霆锋秦岚</div>
                        <div className={"test4"}>今天311影院放映3649场</div>
                    </div>
                    <div className="right">
                        <Button type="warning" inline size="small"
                                style={{margin: 'auto', borderRadius: '15px'}}>收藏</Button>
                    </div>
                </div>
            </Card>


        ))
    }


    render() {
        return (
            <div className={"movie-hotlist"}>
                {
                    this.renderMovieList()
                }

            </div>

        );
    }
}

export default MovieList;
